<template>
	<div>
		<div class="flex_row">
			<video id="video" width="480"  height="380"  ref="videos" ></video>
			<div class="flex_col">
				<a-button type="primary" @click="paizhao">拍照</a-button>
				<a-button type="primary" @click="onloadBtn">下载</a-button>
				<a-button type="primary" @click="cancalCloseVideo(!colseShow)">{{colseShow?"打开摄像头":"关闭摄像头"}}</a-button>
			</div>
			<canvas width="480" height="380"  id="canvas"></canvas>
		</div>
	</div>
</template>

<script>
	import 'ant-design-vue/lib/button/style/index.css';
	import {Button} from 'ant-design-vue' 
	import axios from "ts-axios-new";
	export default {
		data() {
			return {
				fileobj: null,
				colseShow:false
			}
		},
		components:{
			aButton:Button
		},
		methods: {
			paizhao() {
				this.context.drawImage(video, 0, 0, 480, 380);
				var fileobj = document.getElementById('canvas').toDataURL()
				this.fileobj = fileobj
				axios({
					method: 'post',
					url: 'http://39.103.131.74:2000/api/uploadImg',
					data: {
						base: fileobj
					},

				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data.path)
						this.form.imageUrl = res.data.data.path
					} else {

					}
				})

			},
			onloadBtn() {
				console.log(typeof this.fileobj)
				if (typeof this.fileobj == "string") {
					if (window.navigator.msSaveOrOpenBlob) {
						var bstr = atob(this.fileobj.split(',')[1])
						var n = bstr.length
						var u8arr = new Uint8Array(n)
						while (n--) {
							u8arr[n] = bstr.charCodeAt(n)
						}
						var blob = new Blob([u8arr])
						window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
					} else {
						// 这里就按照chrome等新版浏览器来处理getContext
						const a = document.createElement('a')
						a.href = this.fileobj
						a.setAttribute('download', "拍照" + (new Date()).getTime())
						a.click()
					}

				} else {
					alert("请先拍照后在下载")
				}

			},
			autoMakePhoto() {
				let canvas = document.getElementsByTagName('canvas')[0];
				this.context = canvas.getContext('2d');
				let _this = this;
				if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
					navigator.mediaDevices.getUserMedia({
						video: true,
					}).then(function(stream) {
						_this.MediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[0];
						let video = _this.$refs.videos;
						video["srcObject"] = stream;
						video.play();
					}).catch(function(err) {
						console.log(err);
						//调用摄像头失败给的提示
					});
				}
			},
			// 页面离开后关闭摄像头
			cancalCloseVideo(ssss) {
				console.log(ssss)
				this.colseShow=!this.colseShow
				if (ssss) {
					this.MediaStreamTrack && this.MediaStreamTrack.stop();
				} else{
					this.autoMakePhoto()
				}
			}

		},
		// 页面离开后也要关闭摄像头
		beforeDestroy() {
		this.cancalCloseVideo(true)
		}

		,
		mounted() {
			this.autoMakePhoto()
		}
	}
</script>
<style scoped lang="less">
	.flex_row{
		display: flex;
	}
	.flex_col{
		display: flex;
		flex-direction: column;
		margin:0 10px;
		justify-content: center;
		align-content: center;
		button{
			margin-top:10px ;
		}
		
	}
</style>
